<!-- 模板 -->
<template>
  <div class="message">
    <div class="box">
      <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column prop="name" label="申请者名称" align="center"> </el-table-column>
            <!-- <el-table-column label="头像" align="center"> 
              <template slot-scope="scope">
                  <el-image v-if='scope.row.wxUser.headUrl'  style="width: 80px;" :src="scope.row.wxUser.headUrl"  :preview-src-list="[scope.row.wxUser.headUrl]"> </el-image>
              </template>
            </el-table-column>
             <el-table-column prop="wxUser.nickName" label="用户名称" align="center">  -->
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center"> </el-table-column>
            <el-table-column prop="wxUser.openid" label="用户id" align="center"> </el-table-column>
            <el-table-column prop="status" label="联系状态" align="center"> 
                <template slot-scope="scope">
                    <!-- {{scope.row.status ==1?'待联系':'已联系'}} -->
                    <el-tag type="success" v-if="scope.row.status == 2">已联系</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 1">待联系</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="pay" label="是否付费代理" align="center"> 
                <template slot-scope="scope">
                    {{scope.row.pay ==1?'付费':'非付费'}}
                </template>
            </el-table-column>
             <el-table-column prop="payStatus" label="是否付费" align="center"> 
                <template slot-scope="scope">
                    {{scope.row.payStatus ==1?'已支付':'未支付'}}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="咨询类型" align="center"> 
                <template slot-scope="scope">
                    {{scope.row.type ==1?'团体测量咨询':scope.row.type ==2?'申请代理':'申请合作商'}}
                </template>
            </el-table-column>
            <el-table-column prop="platformRemark" label="平台备注" align="center"> </el-table-column>
            <el-table-column prop="wxUserRemark" label="用户咨询备注" align="center"> </el-table-column>
            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>
    </div>
       
        <pagination
        v-show="total >0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getMessageList"
        />

        <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form  label-width="120px" :model="form" :rules="rules" ref="form">
  <el-form-item label="咨询者名称" prop="name">
    <el-input v-model="form.name" style="width:300px" disabled></el-input>
  </el-form-item>
  <el-form-item label="联系方式" prop="phone">
    <el-input v-model="form.phone" style="width:300px" disabled></el-input>
  </el-form-item>
<el-form-item label="联系状态" prop="status">
    <el-select v-model="form.status"  placeholder="请选择"  style="width:300px" >
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
      </el-select>
  </el-form-item>
  <el-form-item label="是否付费代理" prop="status" >
    <el-select v-model="form.pay"  placeholder="请选择"  style="width:300px" disabled>
        <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
      </el-select>
  </el-form-item>
  <el-form-item label="咨询类型" prop="status">
    <el-select v-model="form.type"  placeholder="请选择"  style="width:300px" disabled>
        <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
      </el-select>
  </el-form-item>
  <el-form-item label="用户咨询备注" prop="wxUserRemark" >
    <el-input v-model="form.wxUserRemark" type="textarea" disabled></el-input>
  </el-form-item>
  <el-form-item label="平台备注" prop="platformRemark">
    <el-input v-model="form.platformRemark" type="textarea"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {getList,getDsc,getUpdate,getRecordDet} from '@/api/message/message'
export default {
  name: '',
  data () {
    return {
        tableData:[],
        dialogVisible:false,
        title:'',
        form:{},
        rules:{},
        loading:false,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
        },
        total:0,
        options: [{
          value: 1,
          label: '待联系'
        }, {
          value: 2,
          label: '已联系'
        }],
        options1: [{
          value: 1,
          label: '付费'
        }, {
          value: 2,
          label: '非付费'
        }],
        options2: [{
          value: 1,
          label: '团体测量咨询'
        }, {
          value: 2,
          label: '申请代理'
        },{
          value: 3,
          label: '申请合作商'
        }],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    // 删除按钮
    handleDeleteClick(row){
      const id = row.id ;
        // console.log(id)
        this.$confirm("是否确认删除?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(function() {
            return getRecordDet(id);
            })
            .then(() => {
            this.getMessageList();
            this.$message.success('删除成功')
            })
            .catch(function() {});
    },
      onSubmit(){
          getUpdate(this.form).then(res =>{
              if(res.code == 200){
                  this.dialogVisible = false
                this.$message.success("修改成功")
                  this.getMessageList()

              }
          })
      },
    //   修改按钮
    handleUpdateClick(row){
        this.title = '修改'
        this.dialogVisible = true
        this.form = row
    },
       // 获取所有
    getMessageList() {
      this.loading = true;
      getList(this.queryParams).then(res => {
        // console.log(res);
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    handleClose(){
        this.dialogVisible = false
    },
  },
  created () {
      this.getMessageList()
  },
  mounted () {}
}
</script>

<style  rel="stylesheet/scss" lang="scss">
.box{
    margin: 15px;
    // .btn{
    //     margin-top: 20px;
    // }
}
</style>
